<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选首页</title>
    <link rel="stylesheet" href="../sass/index.css">
</head>

<body>
    <div id="AllHtml">
        <!-- 头部 -->
        <div class="header">
            <!-- 版心盒子 -->
            <div class="container">
                <!-- logo部分 -->
                <div class="logo  left">
                    <img src="../lib/img/logo.png" alt="" class="left">
                    <div class=" logo-text  left">
                        <h2>熊猫优选</h2>
                        <p>XIONG MAO YOU XUAN</p>
                    </div>
                </div>
                <!-- 搜索框 -->
                <div class="search  left">
                    <input type="text" name="" id="" placeholder="搜索商品，发现更多优惠">
                    <div class="search-btn">搜索</div>
                </div>
                <!-- 包邮 7天退换 品质保证 -->
                <div class="header-right   right">
                    <ul>
                        <li>
                            <img src="../lib/img/包邮.png" alt="">
                            <span>全程包邮</span>
                        </li>
                        <li>
                            <img src="../lib/img/钱.png" alt="">
                            <span>7天退换</span>
                        </li>
                        <li>
                            <img src="../lib/img/品质优选.png" alt="">
                            <span>品质保证</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="login right">
                <a href="../pages/login.html">登录 </a>/
                <a href="../pages/regies.html">注册</a>
            </div>
        </div>
        <!-- 首页 -->
        <div class="menus">
            <ul class="container">
                <li>首页</li>
                <li>9块9包邮</li>
                <li>超值大额卷</li>
                <li>降温急救穿搭</li>
            </ul>
        </div>
        <!-- banner-菜单 女鞋，男装.. -->
        <div class=" banner  container">
            <div class="banner-left">
                <ul class="banner-ul">
                    <li>
                        <img src="../lib/img/裙子.png" alt="">
                        <a href="">女装/</a>
                        <a href="">女鞋</a>
                    </li>
                    <li>
                        <img src="../lib/img/鞋子.png" alt="">
                        <a href="">男装/</a>
                        <a href="">男鞋</a>
                    </li>
                    <li>
                        <img src="../lib/img/口红.png" alt="">
                        <a href="">美妆/</a>
                        <a href="">个护</a>
                    </li>
                    <li>
                        <img src="../lib/img/包包.png" alt="">
                        <a href="">配饰/</a>
                        <a href="">箱包</a>
                    </li>
                    <li>
                        <img src="../lib/img/零食.png" alt="">
                        <a href="">零食王国&nbsp&nbsp</a>

                    </li>
                    <li>
                        <img src="../lib/img/奶瓶.png" alt="">
                        <a href="">母婴用品&nbsp&nbsp</a>

                    </li>
                    <li>
                        <img src="../lib/img/手机.png" alt="">
                        <a href="">手机/</a>
                        <a href="">数码</a>
                    </li>
                    <li>
                        <img src="../lib/img/衣.png" alt="">
                        <a href="">内衣袜子&nbsp&nbsp&nbsp</a>
                    </li>
                    <li>
                        <img src="../lib/img/沙发.png" alt="">
                        <a href="">文娱/</a>
                        <a href="">家居</a>
                    </li>
                </ul>
            </div>
            <div class="ul-box">
                隐藏
            </div>
            <div class="banner-context">
                <div class="context-top">
                    <div class="context-swipper  left">
                        <div class="swipper-banner" >
                            <!-- <img src="../lib/img/banner.jpeg" alt="" class="banner-img  left">
                            <img src="../lib/img/微信图片_20211014154705.png" alt="" class="banner-img  left"> -->
                        </div>
                    </div>
                    <div class="context-top-right  left">
                        <h3>9块9包邮</h3>
                        <div class="right-text">保你不吃亏</div>
                        <img src="../lib/img/拖鞋.gif" alt="">
                    </div>
                </div>
                <!--  -->
                <div class="context-bottom">
                    <div class=" context-bottom-F  div">
                        <h3 class="H3">降温急救穿搭</h3>
                        <p class="P">速来抢购~</p>
                        <span class="Span">GO</span>
                        <img src="../lib/img/大衣.png" alt="">
                    </div>
                    <div class=" context-bottom-T div">
                        <h3 class="H3">超值大额劵</h3>
                        <p class="P">优惠直击底价</p>
                        <span class="Span">GO</span>
                        <img src="../lib/img/quan.png" alt="">
                    </div>
                    <a href=" " class=" context-bottom-TH div">
                        <p class="P">扫码下载APP</p>
                        <p class="P">发现更多惊喜</p>
                        <img src="../lib/img/二维码.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <!-- 小编精选 -->
        <div class="banner-xiao  container">
            <h3>小编精选</h3>
            <p>每天更新</p>
        </div>
        <!-- 商品列表 -->
        <div class="product">
            <div class="container">
                <ul>
                    <li class="LI">
                        <img src="../lib/img/面膜.jpg" class="Img" alt="">
                        <div class="ul-bottom">
                            <div class="ul-bottom-F">韩国艾柏梵abybom紫苏邮差面膜女补水保湿清洁毛孔淡化痘印正品</div>
                            <div class="ul-bottom-T">
                                <span class="T-tao">淘宝</span>
                                <span class="T-bao">包邮</span>
                            </div>
                            <div class="ul-bottom-TH">
                                <div class="price"> <span class="span-M">￥</span> <span class="bigspan  span-M">3</span>
                                    <span class="span-M"> .9</span>
                                    <span class="colorspan">1026人已买</span>
                                    <span class="juanspan  right">40元劵</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="LI">
                        <img src="../lib/img/面膜.jpg" class="Img" alt="">
                        <div></div>
                    </li>
                    <li class="LI">
                        <img src="../lib/img/面膜.jpg" class="Img" alt="">
                        <div></div>
                    </li>
                    <li class="LI">
                        <img src="../lib/img/面膜.jpg" class="Img" alt="">
                        <div></div>
                    </li>
                </ul>
                <!-- 查看更多 -->
                <div class="product-more">
                    <div class="more">查看更多</div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="last">
            <div class="foot">
                <div class="last-foot container">
                    <img src="../lib/img/logo.png" alt="" class="left">
                    <div class="foot-text  left">
                        <h3>熊猫优选</h3>
                        <p>年轻人网购首选</br>购物领券更省钱</p>
                    </div>
                    <div class="foot-dow  left">
                        <span class="line">|</span>
                        <a href="">下载APP</a>
                    </div>
                </div>
                <br>
                <div class="foot-bottom  container">
                    <img src="../lib/img/policeIcon.png" alt="" class="icon  left">
                    <p class="p-span  left"><span class="text-span">浙公安网备案 33010602009949号 | ICP备案号: </span>
                        <a href="https://beian.miit.gov.cn" class="a">
                            浙ICP备17012864号-1
                        </a>|
                    </p>
                    <img src="../lib/img/license.png" alt="" class="icon  left">
                    <p class="p-span1">
                        <a href="" class="a  left">证照信息</a>
                    </p>
                </div>

            </div>
        </div>
        <div class="last-img  container">
            <a href=""><img src="../lib/img/安全.png" alt="">
            </a>
        </div>
        <div class="back-top">
            <img src="../lib/img/顶部.png" alt="">
        </div>
    </div>
</body>

</html>